<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <script src="jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>

    </head>
    <body>
        <div class="container">
            <div id="lbt" class="carousel slide" data-ride="carousel">
                    <!--点击部分-->
                <ol class="carousel-indicators">
                    <li class="active" data-toggle="#lbt" data-slide-to="0"></li>
                    <li data-toggle="#lbt" data-slide-to="1"></li>
                    <li data-toggle="#lpt" data-slide-to="2"></li>
                    <li data-toggle="#lpt" data-slide-to="3"></li>

                </ol>
                <!--图片部分-->

                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img class="img" src="images/1.jpg">
                    </div>
                    <div class="item">
                        <img class="img" src="images/2.jpg">
                    </div>
                    <div class="item">
                        <img class="img" src="images/3.jpg">
                    </div>
                    <div class="item">
                        <img class="img" src="images/4.jpg">
                    </div>
                </div>
                <!--方向部分-->
                <a class="left carousel-control" href="#lbt" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                </a>
                <a class="right carousel-control" href="#lbt" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                </a>
            </div>
        </div>
    </body>
</html>